<template>
<!-- 分类 -->
  <div class="typeView" v-cloak>
    <div class="container" v-if="state.lists">
      <TopComponents />
      <div class="type_content">
        <!-- 男频 -->
        <div class="menlist">
          <h2>男频分类</h2>
          <div class="menlist_item" v-if="state.lists.typelistsMen">
            <a @click="boyjump( item.title)"
              v-for="item in state.lists.typelistsMen"
              :key="item.id"
            >
              <h2>{{ item.title }}</h2>
              <div class="img">
                <img :src="item.img" class="img1" alt="" />
                <img :src="item.img2" class="img2" alt="" />
              </div>
            </a>
          </div>
        </div>

        <!-- 女频 -->
        <div class="girllist">
          <h2>女频分类</h2>
          <div class="girllist_item" v-if="state.lists.typelistsGril">
            <a @click="girljump(item.title)" v-for="item in state.lists.typelistsGril" :key="item.id">
              <h2>{{ item.title }}</h2>
              <div class="img">
                <img :src="item.img" class="img1" alt="" />
                <img :src="item.img2" class="img2" alt="" />
              </div>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { reactive } from "@vue/reactivity";
import { gettype_lists } from "../api/type.js";
import TopComponents from "../components/TopComponents.vue";
import { useRouter } from 'vue-router';
export default {
  components: {
    TopComponents,
  },
  setup() {
    let state = reactive({
      lists: null,

    });

    gettype_lists().then((data) => {
      state.lists = data;
    });


    let router = useRouter()


    //点击男频跳转
    let boyjump =(e)=>{
      router.push({
        path:"/Boy_topic_detail",
        query:{id:e}
      })
    }

    //点击女频跳转
    let girljump =(e)=>{
      router.push({
        path:"/Girl_topic_detail",
        query:{id:e}
      })
    }

    

    return {
      state,
      boyjump,
      girljump,
    };
  },
};
</script>

<style lang="scss" scoped>
@import "../assets/css/mobliebase.css";
@import "../assets/css/type.css";
.typeView {
  background-color: #fff;
}
[v-cloak] {
  display: none;
}
</style>